<template>
    <div class="number">
        <div class="left" @click="subtract">-</div>
        <div class="center">{{number}}</div>
        <div class="right" @click="add">+</div>
    </div>
</template>
<script>
    // 引入缓存的模块
    // import ''
    export default{
        data(){
            return{
                number:1
            }
        },
        methods:{
            subtract(){
                if(this.number>1){
                     this.number--;
                 }else{
                    this.number=1;
                 }
               
            },
            add(){
                this.number++
            }
        },
        watch:{
            number:function (newV,oldV) {
                //只要number这个值发生改变，都会重新的设置 emit
                this.$emit('count',newV);
            }
        }
    }
</script>
<style scoped>
    .number{
        overflow: hidden;
        width: 100px;
        display: inline-block;
        margin-left: 10px;
        vertical-align: middle;
    }
    .left,.center,.right{
        line-height: 30px;
        text-align: center;
        width: 30px;
        height:30px;
        background: #ccc;
        float: left;
        border:1px solid #ddd;
    }
</style>